<template>
  <div style="min-height:700px;">
    <el-row type="flex" class="row-bg" justify="center">
      <el-col :span="12" class="toolbar" style="margin-top:10px;">
        <el-form :inline="true">
          <el-form-item>
            <city ref="citySel" :initCity="dptCity"></city>
          </el-form-item>
          <el-form-item>
            <el-input v-model="keyWords" size="small" placeholder="请输入目的地、主题、关键词" style="width:250px;"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" size="small" style="line-height:14px;width:90px;" @click="querytoMd()">查询</el-button>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
    <el-col :span="24" class="toolbar" style="margin-top:20px;">
      <el-tabs v-model="productType" type="card" @tab-click="handleClick">
        <el-tab-pane label="全部" name="all" style="margin:0px;">
          <!-- <div class="opt_container">
            <div class="opt_blk1">
              <span class="opt_font">出发时间：</span>
              <el-checkbox-group v-model="all_dptTimeSel" style="display:inline;margin-left:30px;">
                <el-checkbox v-for="item in all_dptTime" :label="item" :key="item">{{all_dptTime2CH(item)}}</el-checkbox>
              </el-checkbox-group>
            </div>
            <div class="opt_blk">
              <span class="opt_font">行程天数：</span>
              <el-checkbox-group v-model="all_tripDaySel" style="display:inline;margin-left:30px;">
                <el-checkbox v-for="item in all_tripDay" :label="item" :key="item">{{all_tripDay2CH(item)}}</el-checkbox>
              </el-checkbox-group>
            </div>
            <div class="opt_blk">
              <span class="opt_font">服务亮点：</span>
              <el-checkbox-group v-model="all_productFeatureSel" style="display:inline;margin-left:30px;">
                <el-checkbox v-for="item in all_productFeature" :label="item" :key="item">{{all_productFeature2CH(item)}}</el-checkbox>
              </el-checkbox-group>
            </div>
            <div class="opt_blk">
              <span class="opt_font">优惠类型：</span>
              <el-checkbox-group v-model="all_priviTypeSel" style="display:inline;margin-left:30px;">
                <el-checkbox v-for="item in all_priviType" :label="item" :key="item">{{all_priviType2CH(item)}}</el-checkbox>
              </el-checkbox-group>
            </div>
            <div class="opt_blk">
              <span class="opt_font">相关目的地：</span>
              <el-checkbox-group v-model="all_distSel" style="display:inline;margin-left:16px;">
                <el-checkbox v-for="item in all_dist" :label="item" :key="item">{{all_dist2CH(item)}}</el-checkbox>
              </el-checkbox-group>
            </div>
          </div> -->
        </el-tab-pane>
        <el-tab-pane label="跟团游" name="group"></el-tab-pane>
        <el-tab-pane label="自由行" name="free"></el-tab-pane>
        <el-tab-pane label="主题游" name="themt"></el-tab-pane>
      </el-tabs>
    </el-col>
    <el-col :span="16" class="toolbar" style="margin-top:15px;" :loading="loadtype">
      <template>
        <div class="block_b1 pr" v-for="item in Alllist">
          <div class="pic200 pr oh" v-if="item.productType === 'group'">
            <img :src="item.productPic" class="pic200">
            <div style="position: absolute;top: 0px;left: 0px;"><div :class="item.gType === 'dpt' ? 'tips_1':'tips_2'">跟团游</div><div :class="item.gType !== 'dpt' ? 'tips_1':'tips_2'">{{item.gType === 'dpt' ? item.dpt+'出发' : '多地出发'}}</div></div>
          </div>
          <div class="pic200 pr oh" v-else="item.productType !== 'group'">
            <img :src="item.productPic" class="pic200">
          </div>
          <div class="pa" style="width:540px;right:10px;top:10px;">
            <div class="f16 fb" :title="item.productMainTitle" style="overflow:hidden;text-overflow: ellipsis;width:540px;white-space: nowrap">{{item.productMainTitle}}</div>
            <div class="f14" :title="item.productSubTitle">{{item.productSubTitle}}</div>
              <div class="mt7" ><span class="blue_b ml5" v-for="(pf,index) in (item.productFeatures.split(','))" v-if="index < 4">{{pf}}</span></div>
              <div class="mt7"><span>行程天数：</span><span>{{item.tripDay}}天</span></div>
              <div class="mt7 offorange"><span class="f13">￥</span><span class="f20 fb">6980</span><span class="f13">元/起</span></div>
              <div class="orderbtn pa f18" style="right:10px;bottom:0px;" @click="goProductDetail(item.id)">立即预定</div>
          </div>
        </div>
      </template>
    </el-col>
    <el-col :span="16" class="toolbar">
      <el-pagination id="pagination" layout="total, sizes, prev, pager, next, jumper" :page-sizes="[10, 20, 30]" :page-size="pageSize" :current-page="page" :total="total" style="float:right;" @size-change="handleSizeChange1" @current-change="handleCurrentChange1">
      </el-pagination>
    </el-col>
  </div>
</template>

 <script type="text/ecmascript-6">
  import city from '../base/cityPlugin/citySelect'
  import {resetBreads} from '../../tuyou/common/js/util.js'
  export default {
    data () {
      return {
        pageSize: 10,
        total: 0,
        page: 1,
        productType: 'all', // 产品类型
        dptCity: '',
        loadtype: false,
        keyWords: '', // 关键词
        all_dptTime: [-1, 6, 7, 8, 9, 10, 11, 12, 13], // 全部-出发时间
        all_dptTimeSel: [], // 全部-选中出发时间
        all_tripDay: [-1, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10], // 全部-行程天数
        all_tripDaySel: [], // 全部-选中行程天数
        all_productFeature: [-1, 1, 2, 3], // 全部-服务亮点
        all_productFeatureSel: [], // 全部-选中服务亮点
        all_priviType: [-1, 1, 2], // 全部-优惠类型
        all_priviTypeSel: [], // 全部-选中优惠类型
        all_dist: [-1, 1, 2, 3], // 全部-相关目的地
        all_distSel: [], // 全部-相关目的地
        Alllist: {}
      }
    },
    methods: {
      // 出发时间转中文
      all_dptTime2CH (item) {
        if (item === -1) {
          return '不限'
        } else if (item > 0 && item < 13) {
          return item + '月'
        } else if (item >= 13) {
          return '2018年' + (item - 12) + '月'
        }
      },
      // 行程天数转中文
      all_tripDay2CH (item) {
        if (item === -1) {
          return '不限'
        } else {
          return item + '天'
        }
      },
      // 服务亮点转中文
      all_productFeature2CH (item) {
        if (item === -1) {
          return '不限'
        } else if (item === 1) {
          return '含跟团'
        } else if (item === 2) {
          return '含自由活动'
        } else if (item === 3) {
          return '含签证'
        }
      },
      // 优惠类型转中文
      all_priviType2CH (item) {
        if (item === -1) {
          return '不限'
        } else if (item === 1) {
          return 'APP立减'
        } else if (item === 2) {
          return '砍价'
        }
      },
      // 目的地转中文
      all_dist2CH (item) {
        if (item === -1) {
          return '不限'
        } else if (item === 1) {
          return '江苏'
        } else if (item === 2) {
          return '山东'
        } else if (item === 3) {
          return '浙江'
        }
      },
      querytoMd () {
        this.loadtype = true
        var params = {}
        params.dpt = this.dptCity
        params.productType = this.productType
        params.keywords = this.keyWords
        params.pageIndex = this.page
        params.pageSize = this.pageSize
        this.$http.post('/tour/web/productTour/queryMD.htm', params).then(response => {
          var resBody = response.body
          this.loadtype = false
          if (resBody.res === 0) {
            this.Alllist = resBody.result.list
            this.total = resBody.result.total
          }
        })
      },
      // 标签选中事件
      handleClick () {
        this.querytoMd()
      }, // 操作日志分页
      handleSizeChange1 (val) {
        this.pageSize = val
        this.handleClick()
      },
      handleCurrentChange1 (val) {
        this.page = val
        this.handleClick()
      },
      // 转向订单预定详情页
      goProductDetail (id) {
        if (id > 0) {
          this.$router.push('/productDetail/' + id)
        }
      }
    },
    created () {
      resetBreads(this)
      // 获取url参数
      let type = this.$route.params.type
      if (type === '0') {
        this.productType = 'group'
      } else if (type === '1') {
        this.productType = 'free'
      } else if (type === '2') {
        this.productType = 'themt'
      }
      let dptCity = this.$route.params.dptCity
      let keyWords = this.$route.params.keyWords
      if (dptCity) {
        this.dptCity = dptCity
      }
      if (keyWords && keyWords !== 'ept') {
        this.keyWords = keyWords
      }
      this.querytoMd()
    },
    components: {
      city
    }
  }
</script>

<style lang="stylus" rel="stylesheet/stylus" scoped>
  div.el-tabs__header
    margin 0px;
  .opt_container
    border-left 1px solid lightgrey;
    border-right 1px solid lightgrey;
    border-bottom 1px solid lightgrey;
    .opt_blk
      margin 15px 0px 15px 30px;
      .opt_font
        font-weight bold
    .opt_blk1
      padding-top 10px;
      margin 0px 0px 15px 30px;
      .opt_font
        font-weight bold
  .content_s1{
    padding:6px 0;
    width:780px
  }
  .content_s1 .current_s1{
    overflow:hidden;
  }
  .block_b1{
    padding:10px;
    border:1px solid #e0e0e0;
    background-color:#fff;
    margin-bottom 15px;
  }
  .block_b1:hover{
    background-color:#f7f7f7;
    transition:background-color 0.3s ease-in-out;
    cursor:pointer
  }
  .pic200{
    width:200px;
    height:150px;
  }
  .tips_1{
    float: left;
    background-color:#20A0FF;
    color:#fff;
    text-align:center;
    width:60px;
    height:26px;
    line-height:26px;
  }
  .tips_2{
    float: left;
    background-color:#fff;
    color:#20A0FF;
    text-align:center;
    width:60px;
    height:24px;
    line-height:24px;
    border:1px solid #20A0FF
  }
  .blue_b{
    padding:0px 8px;
    display:inline-block;
    border-radius:2px;
    border:1px solid #20A0FF;
    color:#20A0FF
  }
  .orderbtn{
    padding:4px 8px;
    border-radius:2px;
    border:1px solid #20A0FF;
    color:#20A0FF
  }
  .orderbtn:hover{
    background-color:#20A0FF;
    color:#fff;
    cursor:pointer
  }
  .pr {
    position:relative;
  }
  .pa {
    position:absolute;
  }
  .f16
    font-size 16px;
  .fb
    font-weight bold;
  .oh{
    overflow:hidden;
  }
  .mt7 {
    margin-top: 7px;
  }
  .f13 {
    font-size: 13px;
  }
  .f20 {
    font-size: 20px;
  }
  .f18 {
    font-size: 18px;
  }
  .ml5 {
    margin-left: 5px;
  }
  .offorange {
    color: #ff7f0e;
  }
</style>
